import React from 'react';
import { connect } from 'dva';
import { Statistic } from 'antd';
import { Bar } from 'react-chartjs-2';
import style from './network.less';
import { PAGE_NUM, PAGE_SIZE } from "@/constants";
import Map from './Map'

class NetWorkInfo extends React.Component {

  constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }

  update() {
    this.props.dispatch({
      type: 'network/fetch',
      payload: { page: PAGE_NUM, size: PAGE_SIZE }
    });
    let timeoutId = setTimeout(this.update, 3000);
    this.props.dispatch({
      type: 'network/setTimeoutId',
      payload: { timeoutId }
    })
  }

  componentDidMount() {
    this.update();
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'network/setTimeoutId',
      payload: { timeoutId: null }
    });
  }

  static makeBarData(data, first=2, second=6) {
    return {
      labels: data.map(()=> ''),
      datasets: [{
        data: data.map((item) => Math.floor(item / 1000)),
        backgroundColor: function(context) {
          var index = context.dataIndex;
          var value = context.dataset.data[index];
          return value <= first ? '#83d632' :
            value <= second ? '#1991EB' :
              '#FFD410';
        },
        borderWidth: 0,
      }]
    }
  }

  render() {
    const options = {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      title: {
        display: false,
      },
      tooltips: {
        callbacks: {
          label: (tooltipItem) => tooltipItem.yLabel + 's'
        }
      },
      scales: {
        xAxes: [{
          display: false,
        }],
        yAxes: [{
          display: false,
          ticks: {
            min: 0,
          }
        }]
      }
    };

    let data = this.props.data;
    return (
      <div className={style.normal}>
        <div className={style.left}>
          <table>
            <tbody>
            <tr>
              <td><div><Statistic title="最新区块" value={data.latestBlock ? data.latestBlock : ''} /></div></td>
              <td><div><Statistic title="全网TPS" value={data.allTPS ? parseFloat(data.allTPS).toFixed(2) : ''} /></div></td>
              <td><div><Statistic title="历史峰值TPS" value={data.maxTPS ? parseFloat(data.maxTPS).toFixed(2) : ''} /></div></td>
            </tr>
            <tr>
              <td><div><Statistic title="上个区块出块时间" value={data.preOutputTime ? (data.preOutputTime / 1000 + 's') : ''} /></div></td>
              <td><div className={style.special}><Statistic title="最近100块平均出块时间" value={data.avgTime ? (data.avgTime / 1000 + 's') : ''} /></div></td>
              <td><div><Statistic title="共识节点数" value={data.nodeNum ? (data.nodeNum + '/' + data.nodeNum) : ''} /></div></td>
            </tr>
            <tr>
              <td><div><Statistic title="账本大小" value={data.ledgerSize ? (data.ledgerSize) : ''} /></div></td>
              <td><div><Statistic title="全网账户数" value={data.accountNum ? data.accountNum : ''} /></div></td>
              <td><div><Statistic title="资产类型数量" value={data.propertyTypeNum ? data.propertyTypeNum : ''} /></div></td>
            </tr>
            <tr>
              <td>
                <div className={style.title}>
                  <span>出块时间</span>
                </div>
                <div className={style.chart}>
                  {
                    data.outputTimeGraph ? (
                      <Bar data={NetWorkInfo.makeBarData(data.outputTimeGraph)} options={options}/>
                    ) : ''
                  }
                </div>
              </td>
              <td>
                <div className={style.title}>
                  <span>TPS</span>
                </div>
                <div className={style.chart}>
                  {
                    data.tpsGraph ? (
                      <Bar data={NetWorkInfo.makeBarData(data.tpsGraph, 100, 1000)} options={options}/>
                    ) : ''
                  }
                </div>
              </td>
              <td>
                <div className={style.title}>
                  <span>区块交易量</span>
                </div>
                <div className={style.chart}>
                  {
                    data.blockTxNum ? (
                      <Bar data={NetWorkInfo.makeBarData(data.blockTxNum, 100, 1000)} options={options}/>
                    ) : ''
                  }
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div className={style.right}>
          <div className={style.map}>
            <Map/>
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  const { data } = state.network;
  return {
    data,
  };
}

export default connect(mapStateToProps)(NetWorkInfo);
